<template>
  <div class="table">
    <div class="item" v-for="(item,index) in tableData" :key="index">
      <div class="name">{{item.key}}</div>
      <div class="value">{{item.value}}</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'tableNode',
  props: ['node'],
  inject: ['getNode'],
  data() {
    return {
      tableData: [],
    }
  },
  mounted() {
    const node = this.getNode()
    this.tableData = node.data.tableData
    node.on('change:data',(node) => {
      this.tableData = node.current.tableData
    })
  }
}
</script>

<style lang="scss" scoped>
.table{
  width: 100%;
  height: 100%;
  .item{
    display: flex;
    flex-direction: row;
    div{
      width: 50%;
      color: #d0d0d0;
    }
  }
}
</style>